import { useEffect, FC, ReactNode, useState } from 'react';
import { View, Text, Image } from '@tarojs/components'
import './index.less';
import { wineCategoryList } from '@untils/common'
import ToOpen from '@resource/tabImg/toOpen.svg'


// 定义 Props 接口
interface Props {
  children: ReactNode;
}

const Index: FC<Props> = () => {
  const [tabKey, setTabkey] = useState('left')
  const [category, setCategory] = useState('left')


  useEffect(() => {
    // 任何你需要在组件挂载时执行的副作用
  }, []);

  return (
    <View className='business'>
      <View className='myTab'>
        <View className='tab'>
          <Text onClick={() => setTabkey('left')} className={`${tabKey === 'left' ? 'checked-tab' : 'tab-left'}`}>找酒</Text>
          <Text onClick={() => setTabkey('right')} className={`${tabKey === 'right' ? 'checked-tab' : 'tab-right'}`}>出酒</Text>
        </View>
        <View className='doBusiness'>
          {tabKey === 'left' ? '我要找酒' : '我要出酒'}
        </View>
      </View>
      <View className='content'>
        <View className='content-search'>
          <View className='categoryList'>
            {
              [{ name: '全部酒类', type: 'all' }, ...wineCategoryList].map((item, index) => {
                const { name, type } = item
                return <Text key={index} className={`category ${category === type && 'checked'}`} onClick={() => setCategory(type)}>{name}</Text>
              })
            }
          </View>
          <View className='more'>
            <Image className='toOpen' src={ToOpen} mode='aspectFill' />
          </View>
        </View>
      </View>
    </View>
  );
};

export default Index;
